﻿<template>
  <div class="form-container">
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="temp"
      label-position="right"
      class="form-container"
    >
      <sticky
        v-if="isPreview === false"
        :z-index="10" :class-name="'sub-navbar draft'">
        <el-button
          v-loading="loading"
          style="margin-left: 10px;"
          type="primary"
          @click="isEdit === false ? createData() : updateData()"
        >保存</el-button>
      </sticky>
      <div class="form-main-container">
        <el-row v-if="false">
          <el-input v-model="temp.id" type="hidden" />
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label-width="120px" label="父节点:" prop="parentId" class="form-container-item">
              <el-select style="width:100%;" v-model="temp.parentId" placeholder="请选择" clearable @clear="handleClear" ref="selectParent" >
                <el-option
                  :value="treeValue"
                  :label="treeLabel"
                  v-show="false"
                  disabled
                >
                </el-option>
                <el-tree
                  :data="warehouseLocations"
                  :props="defaultProps"
                  :expand-on-click-node="false"
                  :check-on-click-node="true"
                  @node-click="handleNodeClick"
                  ref="tree"
                >
                </el-tree>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="仓库:" prop="warehouseInformationId" class="form-container-item">
              <el-select style="width:100%;" v-model="temp.warehouseInformationId" placeholder="请选择仓库" @change="selectedWarehouseInformation">
                <el-option v-for="item in warehouseInformationOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="库区:" prop="warehouseAreaId" class="form-container-item">
              <el-select style="width:100%;" v-model="temp.warehouseAreaId" placeholder="请选择库区">
                <el-option v-for="item in warehouseAreaOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label-width="120px" label="编码:" prop="code" class="form-container-item">
              <el-input v-model="temp.code" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="名称:" prop="name" class="form-container-item">
              <el-input v-model="temp.name" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="库位全称:" prop="fullName" class="form-container-item">
              <el-input v-model="temp.fullName" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label-width="120px" label="长度:" prop="length" class="form-container-item">
              <el-input-number style="width:100%;" v-model="temp.length" :min="0" :max="100" label="描述文字" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="宽度:" prop="width" class="form-container-item">
              <el-input-number style="width:100%;" v-model="temp.width" :min="0" :max="100" label="描述文字" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="高度:" prop="height" class="form-container-item">
              <el-input-number style="width:100%;" v-model="temp.height" :min="0" :max="100" label="描述文字" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label-width="120px" label="重量:" prop="weight" class="form-container-item">
              <el-input-number style="width:100%;" v-model="temp.weight" :min="0" :max="100" label="描述文字" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="面积:" prop="area" class="form-container-item">
              <el-input-number style="width:100%;" v-model="temp.area" :min="0" :max="100" label="描述文字" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="体积:" prop="volume" class="form-container-item">
              <el-input-number style="width:100%;" v-model="temp.volume" :min="0" :max="100" label="描述文字" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label-width="120px" label="条码:" prop="barCode" class="form-container-item">
              <el-input v-model="temp.barCode" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="巷道号:" prop="laneNumber" class="form-container-item">
              <el-input v-model="temp.laneNumber" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="货架号:" prop="shelfNumber" class="form-container-item">
              <el-input v-model="temp.shelfNumber" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label-width="120px" label="位号:" prop="tagNumber" class="form-container-item">
              <el-input v-model="temp.tagNumber" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="检测类型:" prop="checkType" class="form-container-item">
              <el-select style="width:100%;" v-model="temp.checkType" placeholder="请选择检测类型">
                <el-option v-for="item in checkTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="状态:" prop="status" class="form-container-item">
              <el-select style="width:100%;" v-model="temp.status" placeholder="请选择状态">
                <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label-width="120px" label="负责人:" prop="head" class="form-container-item">
              <el-input v-model="temp.head" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="是否启用:" prop="isEnabled" class="form-container-item">
              <el-switch v-model="temp.isEnabled" active-color="#13ce66" inactive-color="#dcdfe6" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="备注:" prop="remark" class="form-container-item">
              <el-input v-model="temp.remark" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<script>
import Sticky from '@/components/Sticky' // 粘性header组件
import { create, get, update, getAll } from '@/api/warehouseLocation'
import { getAll as getAllWarehouseInformation } from '@/api/warehouseInformation'
import { getAll as getAllWarehouseArea } from '@/api/warehouseArea'

export default {
  name: 'WarehouseLocationDetail',
  components: { Sticky },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    isPreview: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      temp: {
        id: null,
        parentId: null,
        warehouseInformationId: null,
        warehouseAreaId: null,
        recursion: '',
        code: '',
        name: '',
        length: 0,
        width: 0,
        height: 0,
        weight: 0,
        barCode: '',
        fullName: '',
        area: 0,
        volume: 0,
        laneNumber: '',
        shelfNumber: '',
        tagNumber: '',
        checkType: 0,
        status: 0,
        head: '',
        isEnabled: true,
        remark: '',
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '添加'
      },
      rules: {
        length: [{ required: true, message: '长度必须填写', trigger: 'blur' }],
        width: [{ required: true, message: '宽度必须填写', trigger: 'blur' }],
        height: [{ required: true, message: '高度必须填写', trigger: 'blur' }],
        weight: [{ required: true, message: '重量必须填写', trigger: 'blur' }],
        area: [{ required: true, message: '面积必须填写', trigger: 'blur' }],
        volume: [{ required: true, message: '体积必须填写', trigger: 'blur' }],
        checkType: [{ required: true, message: '检测类型必须填写', trigger: 'blur' }],
        status: [{ required: true, message: '状态必须填写', trigger: 'blur' }],
        isEnabled: [{ required: true, message: '是否启用必须填写', trigger: 'blur' }],
      },
      downloadLoading: false,
      loading: false,
      tempRoute: {},
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      warehouseLocations: [],
      warehouseInformationOptions: [],
      warehouseAreaAll: [],
      checkTypeOptions: [
        {
          value: 0,
          label: '不检测'
        },
        {
          value: 1,
          label: '检测面积'
        },
        {
          value: 2,
          label: '检测体积'
        }
      ],
      statusOptions: [
        {
          value: 0,
          label: '空闲'
        },
        {
          value: 1,
          label: '部分使用'
        },
        {
          value: 2,
          label: '全部使用'
        }
      ],
      treeLabel: null,
      treeValue: null
    }
  },
  created() {
    this.tempRoute = Object.assign({}, this.$route)
    if (this.isEdit) {
      const id = this.$route.params && this.$route.params.id
      this.handleUpdate(id)
    } else {
      this.handleCreate()
    }

    getAll().then(response => {
      this.warehouseLocations = this.warehouseLocationsToTreeData(response.data)
      console.log(this.warehouseLocations)
    })

    getAllWarehouseInformation().then(response => {
      this.warehouseInformationOptions = response.data.map(a => { return { label: a.name, value: a.id} })
    })
    
    getAllWarehouseArea().then(response => {
      this.warehouseAreaAll = response.data
    })
  },
  computed: {
    warehouseAreaOptions: function () {
      if (this.temp.warehouseInformationId) {
        return this.warehouseAreaAll.filter(f => f.warehouseInformationId === this.temp.warehouseInformationId).map(a => { return { label: a.name, value: a.id} })
      } else {
        return this.warehouseAreaAll.map(a => { return { label: a.name, value: a.id} })
      }
    }
  },
  methods: {
    resetTemp() {
      this.temp = {
        parentId: null,
        warehouseInformationId: null,
        warehouseAreaId: null,
        recursion: '',
        code: '',
        name: '',
        length: 0,
        width: 0,
        height: 0,
        weight: 0,
        barCode: '',
        fullName: '',
        area: 0,
        volume: 0,
        laneNumber: '',
        shelfNumber: '',
        tagNumber: '',
        checkType: 0,
        status: 0,
        head: '',
        isEnabled: true,
        remark: '',
      }
    },
    handleCreate() {
      this.resetTemp()
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          create(this.temp).then(() => {
            this.$notify({
              title: '成功',
              message: '添加成功',
              type: 'success',
              duration: 2000
            })
            // 触发事件
            this.$bus.$emit('closeTagByTitle', '添加库位')
          }).catch(err => {
            console.log(err)
          }).finally(() => {
            this.loading = false
          })
        }
      })
    },
    handleUpdate(id) {
      get(id).then(response => {
        this.temp.id = response.data.id
        this.temp.parentId = response.data.parentId
        this.temp.warehouseInformationId = response.data.warehouseInformationId
        this.temp.warehouseAreaId = response.data.warehouseAreaId
        this.temp.recursion = response.data.recursion
        this.temp.code = response.data.code
        this.temp.name = response.data.name
        this.temp.length = response.data.length
        this.temp.width = response.data.width
        this.temp.height = response.data.height
        this.temp.weight = response.data.weight
        this.temp.barCode = response.data.barCode
        this.temp.fullName = response.data.fullName
        this.temp.area = response.data.area
        this.temp.volume = response.data.volume
        this.temp.laneNumber = response.data.laneNumber
        this.temp.shelfNumber = response.data.shelfNumber
        this.temp.tagNumber = response.data.tagNumber
        this.temp.checkType = response.data.checkType
        this.temp.status = response.data.status
        this.temp.head = response.data.head
        this.temp.isEnabled = response.data.isEnabled
        this.temp.remark = response.data.remark
        this.dialogStatus = 'update'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.setTagsViewTitle()
          this.$refs['dataForm'].clearValidate()
        })
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          const tempData = Object.assign({}, this.temp)
          const { id } = this.temp
          update(id, tempData).then(() => {
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success',
              duration: 2000
            })
          }).finally(() => {
            this.loading = false
          })
        }
      })
    },
    setTagsViewTitle() {
      const title = '编辑'
      const route = Object.assign({}, this.tempRoute, { title: `${title}-${this.temp.id}` })
      this.$store.dispatch('tagsView/updateVisitedView', route)
    },
    handleNodeClick(data) {
      this.temp.parentId = data.id
      this.temp.recursion = data.recursion + '-' + data.id
      this.temp.warehouseInformationId = data.warehouseInformationId
      this.temp.warehouseAreaId = data.warehouseAreaId
      this.treeLabel = data.name
      this.treeValue = data.id
      this.$refs.selectParent.blur()
    },
    handleClear () {
      this.temp.parentId = null
      this.temp.recursion = ''
    },
    warehouseLocationsToTreeData(data) {
      const result = []

      if (data) {
        const level1Nodes = data.filter(f => f.parentId === null || f.parentId === '00000000-0000-0000-0000-000000000000')
        level1Nodes.forEach((item, index) => {
          const node = {
            id: item.id,
            name: item.name,
            recursion: item.recursion,
            warehouseInformationId: item.warehouseInformationId,
            warehouseAreaId: item.warehouseAreaId,
            children: []
          }
          result.push(node)
          this.warehouseLocationsToTreeDataLoadChildren(node, data)
        })
      }

      return result
    },
    warehouseLocationsToTreeDataLoadChildren(node, data) {
      if (data && node) {
        const childrenNodes = data.filter(f => f.parentId === node.id)
        if (childrenNodes) {
          childrenNodes.forEach((item, index) => {
            const childrenNode = {
              id: item.id,
              name: item.name,
              recursion: item.recursion,
              warehouseInformationId: item.warehouseInformationId,
              warehouseAreaId: item.warehouseAreaId,
              children: []
            }
            node.children.push(childrenNode)
            this.shelfInformationsToTreeDataLoadChildren(childrenNode, data)
          })
        }
      }
    },
    selectedWarehouseInformation() {
      this.temp.warehouseAreaId = null
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/styles/mixin.scss";

.form-container {
  position: relative;

  .form-main-container {
    padding: 40px 45px 20px 50px;

    .form-container {
      position: relative;
      @include clearfix;
      margin-bottom: 10px;

      .form-container-item {
        float: left;
      }
    }
  }
}
</style>
